<template>
  <div>
    <el-generate-form
      ref="generateFormRef"
      v-model="formData"
      :data="widgetForm"
    >
      <template v-slot:codeEditor="{ element }">
        <el-form-item
          :key="element.key"
          :label="element.label"
          :prop="element.model"
        >
          <codemirror
            v-model:value="formData[element.model]"
            language="javascript"
            :showSelection="false"
            class="code"
          />
        </el-form-item>
      </template>
    </el-generate-form>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import widgetForm from './widgetForm'
import codemirror from '../../codemirror/codemirror.vue'

const generateFormRef = ref()
const formData = ref()

const handleSubmit = () => {
  generateFormRef.value
    .getData()
    .then((data) => {
      console.log(data, '表单数据')
    })
    .catch((err) => {
      console.log(err)
    })
}
</script>
